<template>
    <div class="home_resource_content_box">
        <div class="home_resource_content_header">
           <span class="home_resource_content_logotype"
                 style="width: 70px"
                 :class="{'one': props.index===0,'two':props.index===1,'three':props.index===2}"
                 v-if="props.index<3"><img src="/public/img/home/top1.png" alt="">Top.{{ props.index + 1 }}</span>
            <span class="home_resource_content_logotype" v-else>热门</span>
            <span class="home_resource_content_titer">{{ props.resourceContent.title }}</span>
        </div>
        <div class="home_resource_content_body" v-html="props.resourceContent.content"></div>
        <div class="home_resource_content_footer">
            <span class="home_resource_content_time">{{ dayjs(props.resourceContent.time).format(base.timeFormat) }}</span>
            <div class="home_resource_content_info">
                <span><img src="/public/img/header/visit.png" alt=""
                           title="浏览">{{ numberFormat.n_format(props.resourceContent.visit) }}</span>
                <span><img src="/public/img/header/comments.png" alt=""
                           title="点赞">{{ numberFormat.n_format(props.resourceContent.support) }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import base from "@/config/constant/constant.js"
import numberFormat from "@/config/methods/digital.js";
import dayjs from "dayjs";
// 接受父组件参数
const props = defineProps({
    resourceContent: Object,
    index: Number
})


</script>

<style scoped>
span {
    display: inline-block;
    font-size: 15px;
}

.home_resource_content_box {
    width: calc(100% - 200px);
    overflow: auto;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.home_resource_content_header {
    display: flex;
    align-items: center;

}

.home_resource_content_logotype {
    display: flex;
    align-items: center;
    color: #6da6e1;
    border-radius: 2px;
    font-size: 15px;
    min-width: 40px;
    font-weight: bolder;
}

.home_resource_content_logotype img {
    width: 18px;
}

.home_resource_content_titer {

    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 600;
    transition: all .2s;
}

.home_resource_content_titer:hover {
    color: #6da6e1;
}

.home_resource_content_body {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    font-size: 14px;
    letter-spacing: 1px;
    margin: 2px 0;
    -webkit-box-orient: vertical;
}

.home_resource_content_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.home_resource_content_info span {
    font-size: 13px;
    margin: 0 5px;
}

.home_resource_content_info img {
    width: 15px;
    vertical-align: -2px;
    margin-right: 2px;
}

.home_resource_content_time {
    font-size: 13px;
}

.one {
    color: #e74c47;
}

.two {
    color: #fc7d4f;
}

.three {
    color: #6fbb67;
}


</style>